<!-- 模板 -->
<template>
  <div class="login">
    <!-- 标题 -->
    <el-card>
      <!-- 标题 -->
      <el-row class="title">
        <el-col :span="24"> 霸都装饰后台管理系统 </el-col>
      </el-row>
      <!-- 表单 -->
      <el-form
        :model="loginForm"
        :rules="loginFormRules"
        ref="loginFormRef"
        class="loginForm"
      >
        <el-form-item prop="name">
          <el-input v-model="loginForm.name">
            <!-- 前缀 -->
            <template slot="prepend">
              <i class="el-icon-user"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="pass">
          <el-input type="password" v-model="loginForm.pass">
            <template slot="prepend">
              <i class="el-icon-lock"></i>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { request } from '../utils/request'
export default {
  name: '',
  data() {
    return {
      loginForm: {
        name: 'admin',
        pass: 'admin123',
      },
      loginFormRules: {
        name: [
          {
            required: true,
            message: '请输入用户名',
            trigger: 'blur',
          },
          {
            min: 5,
            max: 12,
            message: '用户名长度在 5 到 12 个字符',
            trigger: 'blur',
          },
        ],
        pass: [
          {
            required: true,
            message: '请输入密码',
            trigger: 'blur',
          },
          {
            min: 6,
            max: 12,
            message: '密码长度在 6 到 12 个字符',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    async onSubmit() {
      //验证表单
      let form = this.$refs['loginFormRef']
      let flag = false
      try {
        //验证表单validate函数是异步函数，获得异步代码的返回值
        flag = await form.validate()
        console.log(flag)
      } catch (error) {
        console.log(error)
      }
      //表单验证不通过
      if (!flag) {
        return this.$message.error('请正确填写登录信息')
      }
      //准备请求参数
      let options = {
        url: 'users/login',
        type: 'post',
        data: this.loginForm,
      }
      //发起请求
      let { data: res } = await request(options)
      //判断请求结果
      if (res.code !== 200) {
        //否则提示登录失败
        return this.$message.error(res.msg)
      }
      //结果正确到保存数据
      this.$message.success(res.msg)
      sessionStorage.setItem('login_user', JSON.stringify(res))
      //跳转首页
      this.$router.push('/home')
    },
  },
  created() {},
}
</script>

<style lang="less" scoped>
.login {
  position: fixed;
  background-image: url('../assets/img/login-bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  background-color: #000;
  .el-card {
    position: absolute;
    width: 4.5rem;
    height: 3rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 0;
    opacity: 0.9;
    .el-form {
      opacity: 1;
      padding: 0.4rem;
    }
  }
  .el-row {
    opacity: 1;
    border-bottom: #d7dde7 1px solid;
    padding: 0.15rem 0;
    text-align: center;
    font-size: 0.2rem;
    color: #606266;
  }
  .el-button {
    width: 100%;
  }
}
</style>
